<template>
	<div class="findpw_body">
		<div class="findpw_email">
			<input type="text" v-model="email" class="findpw_text" placeHolder="请输入您的邮箱"><button :disabled="disabled" @touchstart="handleToVerify">{{verifyInfo}}</button>
		</div>
		<div>
			<input type="password" v-model="password" class="findpw_text" placeHolder="请输入新密码">
		</div>
		<div>
			<input type="text" v-model="verify" class="findpw_text" placeHolder="请输入验证码">
		</div>
		<div class="findpw_btn">
         <input type="submit" value="修改密码" @touchstart="handleTofindpw">
      </div>
		<div class="findpw_link">
         <router-link to="/mine/login">立即登录</router-link>
         <router-link to="/mine/register">立即注册</router-link>
      </div>
	</div>
</template>

<script>
import {messageBox} from '@/components/JS'
export default{
	name:'findPassword',
	data(){
		return {
			email:'',
			password:'',
			verify:'',
			verifyInfo:'发送验证码',
			disabled:false
		}
	},
	methods:{
		handleToVerify(){
			if(this.disabled){return;}
			this.axios.get('/api2/users/verify?email='+this.email)
				.then((res)=>{
					var status = res.data.status;
					var This = this;
					if(status === 0){
						messageBox({
							title:'验证码',
							content:'验证码发送成功',
							ok:'确定',
							handleOk(){
								This.countDown();
							}
						})
					}else{
						messageBox({
							title:'验证码',
							content:'验证码发送失败',
							ok:'确定'
						})
				}
			});
		},
		countDown(){
			this.disabled = true
			var count = 60
			var timer = setInterval(()=>{
				count--
				this.verifyInfo = '剩余'+ count +'秒'
				if(count===0){
					this.disabled = false
					count = 60
					this.verifyInfo = '发送验证码'
					window.clearInterval(timer._id);
				}
			},1000)
		},
		handleTofindpw(){
			this.axios.post('/api2/users/findPassword',{
				password:this.password,
				email:this.email,
				verify:this.verify})
				.then((res)=>{
					var status = res.data.status;
					var This = this;
					if(status === 0){
						messageBox({
							title:'修改密码',
							content:'修改密码成功',
							ok:'确定',
							handleOk(){
								This.$router.push('/mine/login');
							}
						})
					}else{
						messageBox({
							title:'修改密码',
							content:res.data.msg,
							ok:'确定'
						})
					}
				});					
			}				
		},
	}
</script>

<style scoped>
#content .findpw_body{  width:100%;}
.findpw_body .findpw_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.findpw_body .findpw_btn{ height:50px; margin:10px;}
.findpw_body .findpw_email{ position:relative;}
.findpw_body .findpw_email button{ position: absolute;right: 10px; top:5px;height: 30px; border-radius: 3px;padding: 5px;border:none;}
.findpw_body .findpw_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.findpw_body .findpw_link{ display: flex; justify-content:space-between;}
.findpw_body .findpw_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
